<template>
  <div class="module_">
    <div class="flex-space-between mb8">
      <el-form :inline="true" :model="pageparm" class="search_box">
        <el-form-item label="搜索：">
          <el-input
            size="small"
            v-model="pageparm.patient"
            placeholder="患者姓名搜索"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            size="small"
            v-model="pageparm.prescribe_doctor"
            placeholder="开单医生姓名搜索"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            size="small"
            v-model="pageparm.execute_doctor"
            placeholder="执行医生姓名搜索"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            @change="dateSearch"
            v-model="pageparm.charging_time"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="收费时间搜索">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="search"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="clearSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      class="flex-1"
      height="150"
      size="small"
      border
      highlight-current-row
      v-loading="tableLoading"
      @sort-change="tableSortChange"
      stripe
    >
      <el-table-column
        align="center"
        prop="name"
        label="患者姓名"
        width="120"
        sortable="custom"
        show-overflow-tooltip
        fixed
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="outpatient_diagnosis"
        label="门诊诊断"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="outpatient_diagnosis_code"
        label="门诊诊断编码"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="item_name"
        label="项目名称"
        width="240"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="item_code"
        label="项目编码"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="item_cate"
        label="项目类别"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="item_cate_code"
        label="项目类别编码"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="prescribe_doctor.name"
        label="开方医生"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="prescribe_department.name"
        label="开方二级科室"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="execute_doctor.name"
        label="执行医生"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="execute_department.name"
        label="执行二级科室"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="income_type"
        label="收入类型"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="serial_no"
        label="流水号"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="card_no"
        label="卡号"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="quantity"
        label="数量"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="price"
        label="单价"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="amount"
        label="金额"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="charging_time"
        label="收费时间"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="admission_time"
        label="入院时间"
        width="200"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="leave_time"
        label="出院时间"
        width="200"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column> 
      <el-table-column
        align="center"
        prop="admission_department.name"
        label="入院二级科室"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="leave_department.name"
        label="出院二级科室"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="leave_diagnosis"
        label="出院诊断"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="leave_diagnosis_code"
        label="出院诊断编码"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="sub_diagnosis"
        label="次诊断"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="sub_diagnosis_code"
        label="次诊断编码"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      
      <el-table-column
        align="center"
        prop="gb_code"
        label="国标码"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="deleteUser(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>

    <!-- <el-dialog
      class="dialog"
      :visible.sync="editFormVisible"
      width="50%"
      @click="editFormVisible = false"
      :close-on-click-modal='false'
      :close-on-press-escape='false'
    >
      <el-form label-width="120px" :model="editForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色名称" class="tip">
              <el-input
                size="small"
                v-model="editForm.name"
                auto-complete="off"
                placeholder="请输入角色名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="角色显示名称" class="tip">
              <el-input
                size="small"
                v-model="editForm.display_name"
                auto-complete="off"
                placeholder="请输入角色显示名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="描述"  class="tip">
              <el-input
                type="textarea"
                v-model="editForm.description"
                placeholder="请输入角色描述"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  Apimainincome,
  ApimainincomeDel
  } from '@/api'
import { debounce,getNowFormatDate } from "@/utils";
export default {
  data() {
    return {
      tableData: [],
      editFormVisible: false,
      editForm: {}, //修改
      pageparm:{ 
        page: 1,
        perPage: 20,
        total: null,
        sort_str: null,
        sort_order: null,
        patient: null,
        prescribe_doctor: null,
        execute_doctor: null,
        charging_time: null
      },
      tableLoading: false,
    };
  },
  mounted() {
    this.getList(true)
  },
  methods: {
    tableSortChange(column) {
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      }else{
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      if(column.prop.includes('.')){
        this.pageparm.sort_str = column.prop.split('.')[0] + '_id'
      }
      this.getList();
    },
    //搜索
    search:debounce( function(){
      this.pageparm.page = 1
      this.getList(); 
    },800,true),
    clearSearch: debounce( function(){
      this.pageparm.patient = null,
      this.pageparm.prescribe_doctor = null,
      this.pageparm.execute_doctor = null,
      this.pageparm.charging_time = null
      this.pageparm.page = 1
      this.getList(); 
    },800,true),
    dateSearch(){
      this.pageparm.page = 1
      this.getList();
    },
    //分页
    callFather(pageparm) {
      this.pageparm.page = pageparm.page;
      this.pageparm.perPage = pageparm.perPage;
      this.getList();
    },
    getList() {
      for (const key in this.pageparm) {
        if(!this.pageparm[key] && this.pageparm[key] !== null){
          this.pageparm[key] = null
        }  
      }
      this.tableLoading = true;
      Apimainincome(this.pageparm)
        .then(({ data, page }) => {
          this.tableData = data || [];
          this.pageparm.total = page.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    deleteUser(index, value) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: '删除中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          ApimainincomeDel(value.id).then((res) => {
            this.getList(true);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }).finally(()=>{
            loading.close()
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submit: debounce(function () {
      //提交  修改或新增
      const editForm = this.editForm;
      if (!editForm.display_name || !editForm.description || !editForm.name) {
        this.$message.error("请输入全部信息");
        return;
      }
      let options = {
        name: editForm.name,
        display_name: editForm.display_name,
        description: editForm.description, //editForm.department.id
      };
      if (editForm.id) {
        //有ID就是修改
        ApirolesPut(options, editForm.id)
          .then((res) => {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.editFormVisible = false;
            this.getList(true);
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "修改失败!",
            });
          });
      } else {
        ApirolesAdd(options)
          .then((res) => {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.editFormVisible = false;
            this.getList(true);
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "添加失败!",
            });
          });
      }
    },500,true),
  },
};
</script>

<style lang='less' scoped>
/deep/ .el-input__inner{
  // width: 180px;
  height: 35px;

}
</style>